/**
 @Author: LiuHao
 @Time : 2018/5/13 15:59
 @Anno :
 **/

const HtmlWebpackPlugin = require("html-webpack-plugin")
// webpack默认只能打包处理 .js后缀名类型的文件;像.png,.vue无法主动处理,所以要配置第三方的Loader规则
module.exports = {
    mode: "development",
    plugins: [
        // 这是配置webpack-dev-server服务器启动时内存中设置/index.html映射的物理路径是/src/index.html并且自动script src插入打包好的main.js
        new HtmlWebpackPlugin({
            template: __dirname + "/src/view/index.html",
            filename: "index.html"
        })
    ],
    // 所有第三方模块的匹配规则
    module: {
        // 第三方匹配规则
        rules: [
            {test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/},
            {// 打包处理CSS样式表的第三方loader
                test: /\.css$/,
                // 追加参数,其中有个固定的参数modules,表示为普通的CSS样式表,启用模块化
                // 设置模块化后的CSS的命名规则
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss/,
                use: ['style-loader', 'css-loader?module&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader']
            },
            // 处理字体文件
            {test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader'}, {
                // 设置图片大小大于1kb则改名
                test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1&name=[name]-[hash:10].[ext]'
            }, {
                test: /\.vue$/, use: 'vue-loader'
            }
        ]
    },
    resolve: {
        // 表示导入模块的时候这几类文件的后缀名可以不写
        extensions: ['.js', '.jsx', '.json'],
        alias: {
            '@': __dirname + "/src",
            // vue模块默认的package.son中的main指定的js文件为"mui/vue.runtime.common.js",该文件默认为运行时的,需要指定为vue.js
            'vue': 'vue/dist/vue.common.js'
        }
    }
}